<template>
    <div class="con1">
     <span class="ani">
     <span>W</span>
     <span>e</span>
     <span>l</span>
     <span>c</span>
     <span>o</span>
     <span>m</span>

     <span>   </span>
     <span>T</span>
     <span>o</span>

     <span>   </span>

     <span>C</span>
     <span>y</span>
     <span>b</span>
     <span>e</span>
     <span>r</span>


     <span>   </span>

     <span>B</span>
     <span>l</span>
     <span>o</span>
     <span>g</span>
     </span>
    </div>
    <h1 class="sen">Enhance your sci-fi,cyberpunk,industrial,urban,space environments with some action...</h1>
</template>

<script>


</script>


<style >
*{
    margin: 0;
    padding: 0;
}
.con1{
    margin-top:216px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.con1 span{
    font-size: 50px;
    font-weight: bold;
    color: #2c3e50;
    letter-spacing: 5px;
    filter: blur(2px);
    animation: animate 2.5s linear infinite;

}
span:nth-child(1){
    animation-delay: 0ms;
}
span:nth-child(2){
    animation-delay:100ms;
}
span:nth-child(3){
    animation-delay: 200ms;
}
span:nth-child(4){
    animation-delay: 300ms;
}
span:nth-child(5){
    animation-delay: 400ms;
}
span:nth-child(6){
    animation-delay: 500ms;
}
span:nth-child(8){
    animation-delay: 600ms;
}
span:nth-child(9){
    animation-delay:700ms;
}
span:nth-child(11){
    animation-delay: 800ms;
}
span:nth-child(12){
    animation-delay:900ms;
}
span:nth-child(13){
    animation-delay: 1000ms;
}
span:nth-child(14){
    animation-delay: 1100ms;
}
span:nth-child(15){
    animation-delay:1200ms;
}
span:nth-child(17){
    animation-delay: 1300ms;
}
span:nth-child(18){
    animation-delay:1400ms;
}
span:nth-child(19){
    animation-delay:1500ms;
}
span:nth-child(20){
    animation-delay:1600ms;
}



@keyframes animate {
    0%,100%{
        color: #72fe53;
        filter: blur(1px);
        text-shadow:
            0 0 10px #642fc9,
            0 0 20px #642fc9,
            0 0 30px #642fc9,
            0 0 40px #642fc9,
            0 0 100px #642fc9,
            0 0 200px #642fc9,
            0 0 300px #642fc9,
            0 0 400px #642fc9;
    }
    5%,95%{
        color: #2c3e50;
        filter: blur(0px);
        text-shadow:none;
    }
}
.sen{
    margin-top: 54px;
}
</style>
